<template>
  <scroll-view scroll-y="true" class="scroll-Y">
    <view class="staff-mine">
      <view class="header">
        <image src="http://218.28.225.151:9000/xingyuepeizhen/my-background.png" class="bg"></image>
        <view class="name">
          <view>
            员工姓名：{{staffinfo.name}}
          </view>
          <view class="exit" @tap="logout">
            <image src="/static/images/mine/mine-exit.png"></image>
            <view class="exit-word">退出</view>
          </view>
        </view>
      </view>
      <view class="box-top">
        <view class="state">状态</view>
        <view class="select">
          <radio-group @change="radioChange">
            <label v-for="(item, index) in radiolist" :key="item.value">
              <view>
                <radio :value="item.value" :checked="item.value==staffinfo.status" />
              </view>
              <view>{{item.name}}</view>
            </label>
          </radio-group>
        </view>
        <view class="save" @tap="saveState">保存</view>
      </view>
      <view class="box-center">
        <view class="count">统计总览</view>
        <view class="blue-box">
          <view class="box-left">
            <view>
              <text style="font-size:36rpx ;color: #58b6ff;font-weight: bold;"> 0</text>
              <text style="color: #58b6ff;">人</text>
            </view>
            <view style="margin-top: 12rpx;">服务人数</view>
          </view>
          <view class="empty-center"></view>
          <view class="box-right">
            <view style="color: #ff5050;font-weight: bold;font-size: 36rpx;">
              5.1
            </view>
            <view style="margin-top: 12rpx;">综合评分</view>
          </view>
        </view>
      </view>
      <view class="box-down">
        <view class="balance">
          <text style="font-size: 32rpx;">余额：</text>
          <text style="color: #ff5f5f;font-size: 50rpx;margin-left: 56rpx;">
            {{(staffinfo.balance/100).toFixed(2)}}</text>
          <text style="color: #ff5f5f;font-size: 24rpx;margin: 10rpx 0 0 18rpx;">元</text>
        </view>
        <view class="three-box">
          <button class="withdraw" @tap="gotoDraw">提现</button>
          <button class="detail">奖励明细</button>
          <button class="detail"  @tap="gotoDrawList">提现记录</button>
        </view>
      </view>
      <view class="end">
        <text style="font-weight: bold;">服务地区：</text>
        <text style="color: #878787;">{{staffinfo.province}} {{staffinfo.city}} {{staffinfo.area}}</text>
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
  import * as http from '@/utils/http'
  import {
    ref
  } from 'vue';
  import {
    useUserInfo
  } from '@/stores/userinfo.js';
  import {
    onLoad
  } from '@dcloudio/uni-app'

  const userInfo = useUserInfo()
  const staffinfo = ref({})
  onLoad(async () => {
    staffinfo.value =uni.getStorageSync("staffInfo");
  })

  const radiolist = [{
      name: '在线',
      value: 1
    },
    {
      name: '离线',
      value: 2
    },
    {
      name: '未设置',
      value: 0
    }
  ]

  function logout() {
    uni.showModal({
      title: '提示',
      content: '确定要退出登录吗?'
    }).then(() => {
      uni.reLaunch({
        url: '/pages/my/my'
      });
    })
  }

  function radioChange(evt) {
    staffinfo.value.status = evt.detail.value
  }
  async function saveState() {
    const result = await http.putRequest("/peizhen/staff/switchStaffOnlie", {
      id: staffinfo.value.id,
      status: staffinfo.value.status
    })
    if (result.code == 0) {
      uni.showToast({
        title: '状态修改成功',
        icon: 'success',
        duration: 1000
      })
    }
  }

  function gotoDraw() {
    uni.navigateTo({
      url: '/pages/staff/withdraw/withdraw'
    })
  }
  function gotoDrawList() {
    uni.navigateTo({
      url: '/pages/staff/withdraw/withdraw-recoder'
    })
  }
</script>

<style lang="scss" scoped>
  .staff-mine {
    background: #f5f6fa;
    position: relative;
    padding-bottom: 60rpx;
  }



  .bg {
    width: 750rpx;
    height: 374rpx;
    background-color: #2dbca3;
  }

  .name {
    padding: 0 30rpx;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #f8fcff;
    font-size: 32rpx;
    font-weight: bold;
    margin-top: 74rpx;
    position: absolute;
    top: 0px;
    left: 0px;
  }

  .revise {
    width: 122rpx;
    height: 43rpx;
    line-height: 43rpx;
    text-align: center;
    background: #FF4D4D;
    border-radius: 21rpx;
    font-size: 22rpx;
    margin-left: 48rpx;
    color: #fff5f0;
  }

  .exit {
    image {
      width: 44rpx;
      height: 44rpx;
    }

    .exit-word {
      font-size: 22rpx;
    }
  }

  .box-top {
    position: absolute;
    top: 190rpx;
    left: 30rpx;
    width: 690rpx;
    height: 347rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
    border-radius: 20rpx;

    .state {
      height: 100rpx;
      line-height: 100rpx;
      font-weight: bold;
      font-size: 32rpx;
      margin: 0rpx 0 0 30rpx;
    }

    .select {
      margin: 10rpx 76rpx 0 26rpx;

      radio-group {
        display: flex;
        justify-content: space-between;
        margin-left: 66rpx;

        label {
          display: flex;
        }
      }
    }

    .save {
      width: 630rpx;
      height: 96rpx;
      background: #22b9a3;
      border-radius: 48rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 96rpx;
      margin: 57rpx auto 0 auto;
    }
  }

  .box-center {
    width: 690rpx;
    height: 311rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
    border-radius: 20rpx;
    margin-top: 180rpx;
    margin-left: 30rpx;
    // margin: 30rpx;

    .count {
      width: 100%;
      height: 110rpx;
      line-height: 110rpx;
      font-weight: bold;
      font-size: 32rpx;
      margin-left: 30rpx;
    }

    .blue-box {
      width: 630rpx;
      height: 160rpx;
      background: #f5fbff;
      border-radius: 20rpx;
      margin: auto auto;
      display: flex;
      //justify-content: space-around;
      align-items: center;

      .box-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 90rpx;
      }

      .empty-center {
        width: 1rpx;
        height: 59rpx;
        background: #CFD6F2;
        margin-left: 103rpx;
      }

      .box-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 103rpx;
      }
    }
  }

  .box-down {
    width: 690rpx;
    height: 261rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
    border-radius: 20rpx;
    margin: 30rpx;

    .balance {
      display: flex;
      align-items: center;
      height: 150rpx;
      line-height: 150rpx;
      font-weight: bold;
      margin-left: 30rpx;
    }

    .three-box {
      display: flex;
      flex-direction: row;
      text-align: center;
      justify-content: space-between;
      margin: 0 30rpx;

      .withdraw {
        width: 193rpx;
        height: 68rpx;
        background: #2dbca3;
        border-radius: 16rpx;
        color: #FFFFFF;
        font-size: 28rpx;
        line-height: 68rpx;
      }

      .detail {
        width: 193rpx;
        height: 68rpx;
        background: #F3FAFF;
        border: 1rpx solid #55B5FF;
        border-radius: 16rpx;
        font-size: 28rpx;
        line-height: 68rpx;
        color: #55b5ff;
      }
    }
  }

  .end {
    width: 690rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
    border-radius: 20rpx;
    margin: 30rpx;
    line-height: 120rpx;
    font-size: 32rpx;
    display: flex;
    justify-content: space-between;
    padding: 10rpx 20rpx;
    box-sizing: border-box;
  }

  .scroll-Y {
    height: 100vh;
  }
</style>